Introduction

In this reading, you will recap the key principles of UX and UI. User experience (UX) refers to how a user interacts with or utilizes a product. So, by giving users meaningful, relevant and satisfying experiences, UX design aims to boost user satisfaction. The user interface (UI) is the primary means through which a user communicates with a computer, phone or another device.

UX

There are five primary stages in the UX design process. Let’s revisit them.

Stage 1: Empathize

The first stage of UX design is understanding potential users’ needs by placing yourself in their shoes. In this stage, you try to identify the type of consumer they are to better understand their requirements. Tasks in this stage include getting permission to interview and observe customers as they interact with an app. For instance, for the Little Lemon food ordering app, you will observe all the actions users take during the process of ordering food. The key here is to understand your user's needs and to identify their frustrations. From the results of this research, you create a persona, like the example below, that you can reference throughout the design process of your app.

This stage also includes creating a user journey map, which uncovers moments of frustration and satisfaction in a series of interactions. Again, this is to provide a detailed view of the customer experience. The user journey map will also keep your ideas and solutions grounded and avoid making assumptions.

Stage 2: Define the problem

Part of user research is identifying the problem. Here you gather and analyze all the information collected from your users and identify the critical issues and needs that they have. You should prioritize these frustrations by importance. You now know who your users are, their frustrations and what problems you need to solve.

Stage 3: Ideation

Once you know the issues and whom you're solving them for, you can ideate what the optimal user experience should be. Ideating is a process of generating ideas and solutions for the identified problem through sketching, brainstorming, user flow, mind mapping and even handwriting notes. The key here is to keep an open mind and not commit to one specific idea, which may be iterated throughout the design process. To iterate is to reflect on your work and refine and improve your design. You will sketch out your ideas into something that will address the Little Lemon customers’ needs. You will then develop your ideas into wireframes. A wireframe is a two-dimensional representation of the user interface concerned with the placement and hierarchy of content and the functionalities offered, plus the everyday actions that users will take.

Stage 4: Prototype

Next, you will create a simulation of the final product. You have iterated and refined your ideas into a new solution, but you have yet to prove it will work for your users. You should first simulate how your app will behave with a prototype. In this phase, you take your wireframe and flesh it out. Give it some color, put in some buttons and text and make it interactive. You can simulate a real scenario for your customers to help them achieve their desired goals. Since UX is an iterative process based on user and client feedback, you may also have to iterate at this stage. So, during prototyping, your ideas are constantly being refined as you gradually approach a final design solution.

Stage 5: Test and build

After that, you will test your design. The testing stage is where you present your solution to users and get their feedback. You create a test script with clear instructions for achieving a task or tasks. In this way you can test how participants interact with your prototype while trying to accomplish specific tasks. Any frustrations can be communicated and highlighted during the testing and you can go back and address them before the next step which is to build the app. By now you’ve listened to users, empathized with them and aimed to solve their needs through iterative design techniques. You've watched them use your prototype and have tweaked it to make it easier and more intuitive. Now it's time to build the app.

Following these UX design steps will ensure you create a product that addresses the needs of your users and offers a great user experience.

UI

While there are no specific UI design processes, it is crucial to get it right. When UI is done correctly, users don't notice it; but when it is done poorly, or not at all, users will have a bad experience. Consistency is one of the critical factors in usability and learnability, so a good UI design must be consistent. There are several types of UI consistency, including:

Conclusion

You should now be able to explain the differences between UX and UI and recognize the importance of putting the customer at the forefront of your design decisions as you work on any project. For a more in-depth refresher of UX and UI, you may find it helpful to revisit the following videos and reading in the Principles of UX and UI design course: